<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="/layui-v2.2.6/layui/css/layui.css">
</head>

<body>
    <!-- 你的HTML代码 -->
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div><img src="banner1.jpg"></div>
            <div><img src="banner2.jpg"></div>
            <div><img src="banner3.jpg"></div>
            <div><img src="banner4.jpg"></div>
        </div>
    </div>
    <script src="/layui-v2.2.6/layui/layui.js"></script>
    <script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer,
            form = layui.form;

        layer.msg('Hello World');
    });

    layui.use('element', function() {
        var element = layui.element;

        //…
    });
    layui.use('carousel', function() {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1',
            width: '100%' //设置容器宽度
                ,
            arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
    </script>
</body>

</html>